<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>浮动布局</title>
		<style>
			.box{
				width: 520px;
				overflow: hidden;
				border: 2px solid paleturquoise;
				padding: 10px;
				margin: 20px auto;
				border-radius: 5px;
			}
			.box_left {
				float: left;
				width: 150px;
				margin-right: 15px;
				padding: 1em;
				border-radius: 5px;
				background-color: blueviolet;
				min-height: 150px;
				color: white;
				text-align: center;
				line-height: 150px;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="box_left">向左浮动</div>
			<p>浮动布局是调用浮动属性来使得元素向左或者向右移动从而共享一行，直到碰到包含框或者另一个浮动框。浮动元素是脱离文档流的，不占据页面空间，但不脱离文本流，且浮动会将行内元素和行内块元素转化为块元素。
			</p>
			<div style="clear: both;"></div>
			<p>浮动布局是调用浮动属性来使得元素向左或者向右移动从而共享一行，直到碰到包含框或者另一个浮动框。浮动元素是脱离文档流的，不占据页面空间，但不脱离文本流，且浮动会将行内元素和行内块元素转化为块元素。</p>
		</div>
	</body>

</html>
